<template>
  <div class="front-user-info" v-if="$root.$data.user != null">
    <el-form status-icon label-width="80px">
      <el-form-item label="昵称" prop="roleName">
        <el-input v-model="$root.$data.user.roleName" readonly></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="$root.$data.user.email" readonly type="email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="$root.$data.user.tel" readonly></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group disabled v-model="$root.$data.user.sex">
          <el-radio :label="true">男</el-radio>
          <el-radio :label="false">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
          readonly
          v-model="$root.$data.user.birthday"
          align="right"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="$root.$data.user.name" readonly></el-input>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker
          v-model="$root.$data.user.gmtCreate"
          align="right"
          type="date"
          placeholder="选择日期"
          readonly
        ></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "userInfo",
  data() {
    return {
      date: new Date()
    };
  },
  methods: {
    getDate() {
      let date = new Date(this.user.gmtCreate);
      return (
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1) +
        "-" +
        date.getDate() +
        " " +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds()
      );
    }
  }
};
</script>

<style scoped>
.front-user-info > * {
  line-height: 2;
}
</style>